<% @actor = @article.organization || @article.user %>
<div class="crayons-article-sticky grid gap-4 pb-4 break-word" id="article-show-primary-sticky-nav">
  <div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: <%= Color::CompareHex.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %>;">
    <%= render "shared/profile_card_content", actor: @actor, context: "sidebar" %>
  </div>

  <% cache("article-sticky-nav-articles-#{@article.id}-#{@actor.latest_article_updated_at}", expires_in: 48.hours) do %>
    <% if (user_stickies = Articles::GetUserStickies.call(@article, @actor)).present? %>
      <div class="crayons-card crayons-card--secondary">
        <header class="crayons-card__header">
          <h3 class="crayons-subtitle-2">
            <%= t("views.sticky.more_from_html", actor: link_to(@actor.name, @actor.path)) %>
          </h3>
        </header>
        <div>
          <% user_stickies.each_with_index do |article, index| %>
            <a class="crayons-link crayons-link--contentful" href="<%= article.path %>">
              <%= article.title %>
              <div class="crayons-link__secondary -ml-1">
                <% article.decorate.cached_tag_list_array.each do |tag| %>
                  <span class="mr-1"><span class="opacity-50">#</span><%= tag %></span>
                <% end %>
              </div>
            </a>
          <% end %>
        </div>
      </div>
    <% elsif (sticky_articles = Articles::SuggestStickies.call(@article)).present? %>
      <div class="crayons-card crayons-card--secondary">
        <header class="crayons-card__header">
          <h3 class="crayons-subtitle-2">
            <%= t("views.sticky.trending_html", app: link_to(community_name, app_url)) %>
            <%= crayons_icon_tag("twemoji/fire", native: true, title: t("views.sticky.hot")) %>
          </h3>
        </header>
        <div>
          <% sticky_articles.each_with_index do |article, index| %>
            <a class="crayons-link crayons-link--contentful flex" href="<%= article.path %>">
              <span class="crayons-avatar mr-2 shrink-0">
                <img src="<%= article.cached_user.profile_image_url_for(length: 90) %>" class="crayons-avatar__image" loading="lazy" alt="<%= article.cached_user.name %> profile image">
              </span>
              <div>
                <%= article.title %>
                <div class="crayons-link__secondary -ml-1">
                  <% article.decorate.cached_tag_list_array.each do |tag| %>
                    <span class="mr-1"><span class="opacity-50">#</span><%= tag %></span>
                  <% end %>
                </div>
              </div>
            </a>
          <% end %>
        </div>
      </div>
    <% end %>
  <% end %>
</div>

<div class="crayons-article-sticky grid gap-4 break-word js-billboard-container" data-async-url="<%= article_billboard_path(username: @article.username, slug: @article.slug, placement_area: :post_sidebar) %>"></div>
